<template>
  <div class="o-a">
    <Page-title :title="title" />
    <div class="f f-ai-c f-jc-c p20">
      <div>
        <div class="PTH-One p30">
          <div class="PTH-title font28">{{ data1.title }}</div>
          <div class="PTH-con g g4">
            <div class="PTH-box m16" v-for="(i, k) in data1.data" :key="k">
              <div class="mt8 ml9 mb8 font14">{{ i.name || "" }}</div>
              <div class="f f-jc-c font32">{{ i.value || 0 }}％</div>
              <div class="mt9 ml25 font12 cf">
                规格范围：{{ i.scale || "-" }}
              </div>
            </div>
          </div>
        </div>
        <div class="PTH-Two p30">
          <div class="PTH-title font28">{{ data2.title }}</div>
          <div class="PTH-con g g4">
            <div class="PTH-box m15" v-for="(i, k) in data2.data" :key="k">
              <div class="mt8 ml9 mb8 font14">{{ i.name || "" }}</div>
              <div class="f f-jc-c font32">{{ i.value || 0 }}％</div>
              <div class="mt10 ml25 font12 cf">
                规格范围：{{ i.scale || "-" }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="PTH-right p30 ml24">
        <div class="PTH-title font28">{{ data3.title }}</div>
        <div class="PTH-con g g4">
          <div class="PTH-box ml24 m18" v-for="(i, k) in data3.data" :key="k">
            <div class="mt8 ml9 mb8 font14">{{ i.name || "" }}</div>
            <div class="f f-jc-c font32">{{ i.value || 0 }}％</div>
            <div class="mt10 ml25 font12 cf">
              规格范围：{{ i.scale || "-" }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    // 标题
    title: {
      type: String,
      default: "",
    },
    // 数据1
    data1: {
      type: Object,
      default: () => {
        return {
          title: "",
          data: [],
        };
      },
    },
    // 数据2
    data2: {
      type: Object,
      default: () => {
        return {
          title: "",
          data: [],
        };
      },
    },
    // 数据3
    data3: {
      type: Object,
      default: () => {
        return {
          title: "",
          data: [],
        };
      },
    },
  },
  data() {
    return {};
  },
};
</script>
<style lang="scss" scoped>
::v-deep ::-webkit-scrollbar {
  display: none !important;
}
.o-a {
  height: 1080px;
  background-color: #051735;
  background: url("~@/assets/img/bg.png");
}
.PTH-One {
  width: 911px;
  max-height: 550px;
  background: url("../../../../assets/img/bg3.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
  .PTH-con {
    overflow-y: auto;
    max-height: 500px;
    background-size: 100% 100%;
    position: relative;
  }
}

.PTH-Two {
  width: 911px;
  margin-top: 30px;
  height: 356px;
  background: url("../../../../assets/img/bg8.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
  .PTH-con {
    overflow-y: auto;
    width: 100%;
    max-height: 296px;
    background-size: 100% 100%;
    position: relative;
  }
}
.PTH-title {
  font-family: YouSheiBlack;
  color: #45f4ff;
  position: absolute;
  left: 50%;
  top: -20px;
  z-index: 100;
  transform: translateX(-50%);
}
.PTH-right {
  width: 911px;
  height: 935px;
  background: url("../../../../assets/img/bg6.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
  .PTH-con {
    overflow-y: auto;
    width: 100%;
    max-height: 886px;
    background-size: 100% 100%;
    position: relative;
  }
}
.PTH-box {
  width: 170px;
  height: 112px;
  background: url("../../../../assets/img/bg4.png") no-repeat;
  background-size: 100% 100%;
  color: #45f4ff;
}
.cf {
  color: #dbfaff;
}
</style>
